﻿<div>
    <h4 style="margin-bottom: 16px">Presets:</h4>
    <div>
        @foreach (var color in colors)
        {
            <div key="@color">
                <AntBadge Color="@color" Text="@color" />
            </div>
        }
    </div>
    <h4 style="margin:16px 0;">Custom:</h4>
    <div>
        <AntBadge Color="#f50" Text="#f50" />
        <br />
        <AntBadge Color="#2db7f5" Text="#2db7f5" />
        <br />
        <AntBadge Color="#87d068" Text="#87d068" />
        <br />
        <AntBadge Color="#108ee9" Text="#108ee9" />
    </div>
</div>

<style>
    .ant-tag {
        margin-bottom: 8px;
    }
</style>

@code
{
    string[] colors =
    {
        "pink",
        "red",
        "yellow",
        "orange",
        "cyan",
        "green",
        "blue",
        "purple",
        "geekblue",
        "magenta",
        "volcano",
        "gold",
        "lime",
    };
}
